<template>
  <view class="template-course tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <!-- <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar> -->
    
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
        <!-- 图标logo -->
        <view class="custom-nav__back">
          <view class="logo-pic tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/logo/logo2.png')">
            <view class="logo-image">
            </view>
          </view> 
          <!-- <view class="tn-icon-left"></view> -->
        </view>
        <!-- 搜索框 -->
        <view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center " @click="tn('/pages/list/search/search')">
          <view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark tn-bg-gray--light">
            <view class="custom-nav__search__icon tn-icon-search"></view>
            <view class="custom-nav__search__text tn-padding-left-xs">搜搜学习资料</view>
          </view>
        </view>
      </view>
    </tn-nav-bar>
    
    <!-- 页面内容 -->
    <view class="tn-margin tn-no-margin-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <tn-swiper :list="banner" :height="350" :effect3d="false" mode="dot"></tn-swiper>
	  <tn-notice-bar :list="list" mode="horizontal" fontColor="#999"></tn-notice-bar>
	  
    </view>
    <view class="tn-padding-top-xs">
      <!-- 方式15 start-->
      <view class="tn-flex tn-margin tn-flex-row-center tn-bg-white course-shadow course-radius">
        <view class="tn-padding-sm tn-margin-xs" v-for="(item,index) in menuData" :key="index">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center"  @click="tn(item.url)">
            <view :class="['icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur','tn-color-white',item.color] ">
              <view :class="item.icon"></view>
            </view>  
            <view class="tn-text-center">
              <text class="tn-text-ellipsis">{{item.title}}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 方式15 end-->

      
      <!-- <tn-skeleton :show="showSkeleton"></tn-skeleton> -->
      <view class="tn-flex tn-flex-row-between tn-margin-sm">
        <view class="justify-content-item tn-text-bold tn-text-xl">
          <text class="tn-icon-title "></text>
          <text class="">{{basics.title}}</text>
        </view>
        <view class="justify-content-item tn-text-lg" @click="tn('/pages/course/course',{category_id:basics.cid})">
          <text class="tn-padding-xs">更多</text>
          <text class="tn-icon-right"></text>
        </view>
      </view>       
       
      <!-- 比例 start-->
      <view class="tn-flex tn-flex-wrap tn-margin-sm">
        <block v-for="(item, index) in basics.data" :key="index">
          <view class="" style="width: 50%;"  @click="tn('/pages/detail/detail?id='+item._id)">
            <view class="tn-blogger-content__wrap">
              <view class="image-pic" :style="'background-image:url(' + item.avatar.url + ')'">
                <view class="image-music">
                </view>
              </view> 
              
              <view class="tn-blogger-content__label tn-text-justify tn-padding-sm">
                <text class="tn-blogger-content__label__desc">{{ item.title }}</text>  
              </view>
              
              <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-sm tn-padding-right-sm tn-padding-bottom-sm">
                <view class="justify-content-item tn-flex tn-flex-col-center">
                  <view>
                    <text>{{item.content}}</text>
                  </view>
                </view>
              </view>
              
              
            </view>
          </view>
        </block>
      </view>
      <!-- 比例 end-->
      <view class="tn-flex tn-flex-row-between tn-margin-sm">
        <view class="justify-content-item tn-text-bold tn-text-xl">
          <text class="tn-icon-title "></text>
          <text class="">{{diys.title}}</text>
        </view>
        <view class="justify-content-item tn-text-lg" @click="tn('/pages/course/course',{category_id:diys.cid})">
          <text class="tn-padding-xs">更多</text>
          <text class="tn-icon-right"></text>
        </view>
      </view>       
       
      <!-- 比例 start-->
      <view class="tn-flex tn-flex-wrap tn-margin-sm">
        <block v-for="(item, index) in diys.data" :key="index">
          <view class="" style="width: 50%;"  @click="tn('/pages/detail/detail?id='+item._id)">
            <view class="tn-blogger-content__wrap">
              <view class="image-pic" :style="'background-image:url(' + item.avatar.url + ')'">
                <view class="image-music">
                </view>
              </view> 
              
              <view class="tn-blogger-content__label tn-text-justify tn-padding-sm">
                <text class="tn-blogger-content__label__desc">{{ item.title }}</text>  
              </view>
              
              <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-sm tn-padding-right-sm tn-padding-bottom-sm">
                <view class="justify-content-item tn-flex tn-flex-col-center">
                  <view>
                    <text>{{item.content}}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
      <!-- 比例 end-->
    </view>
   
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  import NavIndexButton from '@/libs/components/nav-index-button.vue'
  const db = uniCloud.database();
  const homeDone=uniCloud.importObject('page-data-center')
  import {
  	store,
  	mutations
  } from '@/uni_modules/uni-id-pages/common/store.js'
  export default {
    name: 'TemplateCourse',
    mixins: [template_page_mixin],
    components: { NavIndexButton },
    data(){
      return {
        banner: [],
        tuniaoData: [],
		menuData:[],
		basics:[],
		diys:[],
		list: [
		  '词汇小课堂现已发布V1.0.0,欢迎体验',
		  '今天天气晴朗，适合多多学习'
		],
		showSkeleton:true
      }
    },
    methods: {
      // 跳转
      tn(url,params) {
		  uni.setStorageSync('params',params)
		 if(url.includes("course/course")){
			 uni.switchTab({
			 	url
			 })
		 }else{
			 uni.navigateTo({
			 	url
			 })
		 }
      },
    },
	async onLoad() {
		try {
		 const pageData = await homeDone.getHomeConfig() //导入云对象后就可以直接调用该对象的方法了，注意使用异步await
		 this.banner=pageData.banner
		 this.tuniaoData=pageData.tuniaoData
		 this.menuData=pageData.menuData
		 this.basics=pageData.basics
		 this.diys=pageData.diys
		 setTimeout(()=>{
			 this.showSkeleton=false
		 },300)
		} catch (e) {
		 console.log(e.errCode)
		 console.log(e.errMsg)
		}

	}
  }
</script>

<style lang="scss" scoped>
  @import '@/static/css/templatePage/custom_nav_bar.scss';
  /* 自定义导航栏内容 start */
  @import 'home.scss';
</style>
